<template>
  <div>
    <!--    <div class="nav">-->
    <!--      <a href="/" class="path-item">首页</a>-->
    <!--      <a v-if="item.cId" href="/" class="path-item">{{ item.cId.title }}</a>-->
    <!--      <a href="/" class="path-item">项目详情</a>-->
    <!--    </div>-->
    <div class="breadcrumb-nav-wrapper px1000 mt20 mb20">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="item.cid">
          {{ item.cid.title }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>项目详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrapper">
      <div class="header">
        <div class="logo">
          <img
            :src="item.logo"
            alt=""
          >
        </div>
        <div class="item_header">
          <div class="title">
            <h2>{{ item.title }}</h2>
          </div>
          <div class="star-wrapper">
            <div class="service-comment-warp">
              <div class="service-star-warp clearfix">
                <div class="service-star-txt">
                  评分
                </div>
                <div class="service-star-box">
                  <div class="service-star-score">
                    4.99
                  </div>
                  <div class="service-star">
                    <div class="star-mask">
                      <a id="j-star-mask" href="###" />
                    </div>
                    <div class="gray-bg">
                      <div class="bar" style="width: 99.8%" />
                    </div>
                  </div>
                </div>
                <ul class="service-star-detail-score">
                  <li class="first">
                    服务态度：<strong>5.00</strong>分
                  </li>
                  <li>
                    工作速度：<strong>4.99</strong>分
                  </li>
                  <li>
                    完成质量：<strong>4.99</strong>分
                  </li>
                </ul>
              </div>
              <div class="service-other-number clearfix">
                <div class="service-complete-time">
                  创业行业:<strong>{{ item.industry.title }}</strong>
                </div>
                <div class="service-complete-time">
                  投入资金:<strong>{{ item.money.title }}</strong>
                </div>
                <div class="service-complete-time">
                  创业方式:<strong>{{ item.type.title }}</strong>
                </div>
                <div class="service-complete-time">
                  发展地域:<strong>{{ item.area.title }}</strong>
                </div>
                <div class="service-complete-time">
                  店面位置:<strong>{{ item.position.title }}</strong>
                </div>
                <div class="service-complete-time">
                  消费对象:<strong>{{ item.crowd.title }}</strong>
                </div>
              </div>
            </div>
            <div class="service-buy">
              <a class="ui-btn-inverse">立即加盟</a>
              <a href="#" class="service-contact-btn">
                <i />
                <u>在线咨询</u>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content" v-html="item.content">
      <!--      {{ item }}-->
    </div>
  </div>
</template>
<script>
export default {
  name: 'ItemDetail',
  props: {
    item: {
      required: true,
      type: Object,
      default: () => {
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.nav {
  width: 1100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin: 11px auto;

  .path-item {
    color: #333;
    font-size: 14px;
    font-weight: 400;

    &::after {
      content: '';
      width: 6px;
      height: 10px;
      background-image: url(//as.zbjimg.com/static/shop/shop/detail/css/img/icon-arrow-right_c8be309.png);
      background-size: 100%;
      background-position: center center;
      display: inline-block;
      margin: 0 4px;
    }

    &:last-child::after {
      background-image: none
    }
  }
}

.wrapper {
  width: 1100px;
  margin: 0 auto 20px;
  background-color: #FFFFFF;

  .header {
    display: flex;
    justify-content: space-between;

    .logo {
      width: 680px;
      height: 350px;
      text-align: center;
      overflow: hidden;
      padding-bottom: 20px;

      img {
        width: 100%;
        overflow: hidden;
      }
    }

    .item_header {
      width: 379px;

      .title {
        h2 {
          font-size: 16px;
          line-height: 26px;
          max-height: 52px;
          overflow: hidden;
          padding-right: 10px;
          margin-top: 17px;
        }
      }

      .star-wrapper {
        .service-comment-warp {
          border-top: 1px dotted #ddd;
          padding-top: 16px;

          .service-star-warp {
            height: 70px;

            .service-star-txt {
              float: left;
              line-height: 70px;
              margin-left: 20px;
              margin-right: 20px;
              color: #999;
            }

            .service-star-box {
              float: left;
              text-align: center;
              width: 130px;

              .service-star-score {
                font-size: 17px;
                color: #ff9400;
              }

              .service-star {
                width: 114px;
                height: 21px;
                display: inline-block;
                vertical-align: middle;
                position: relative;

                .star-mask {
                  position: absolute;
                  width: 114px;
                  height: 21px;
                  left: 0;
                  top: 0;
                  background: url(~/assets/item/service-icon.png) no-repeat 0 -35px;
                  z-index: 2;

                  a {
                    display: block;
                    height: 100%;
                  }
                }

                .gray-bg {
                  position: absolute;
                  width: 114px;
                  height: 21px;
                  left: 0;
                  top: 0;
                  z-index: 1;
                  background: #e3e3e3;

                  .bar {
                    background: #f90;
                    height: 100%;
                  }
                }
              }
            }

            .service-star-detail-score {
              float: left;
              width: 130px;
              border-left: 1px dotted #E0E0E0;
              color: #999;
              list-style: none;
              padding-left: 20px;
              height: 60px;
              margin-top: 4px;

              li {
                line-height: 23px;

                strong {
                  color: #f90;
                  font-weight: normal;
                  padding-right: 5px;
                }
              }

              li.first {
                margin-top: -4px;
              }
            }
          }
        }

        .service-other-number {
          border-top: 1px solid #e3e3e3;
          padding: 11px 0 5px 0;
          text-align: center;
          color: #666;
          margin-top: 15px;
          margin-right: 18px;

          .service-complete-time {
            float: left;
            width: 150px;
            text-align: left;
            margin-left: 20px;

            strong {
              color: #fc8d02;
              font-size: 14px;
              font-weight: bold;
              margin-left: 5px;
            }
          }

          .service-respond-time {
            float: left;
            border-left: 1px solid #e3e3e3;
            width: 170px;
            height: 16px;

            strong {
              color: #fc8d02;
              font-size: 14px;
              font-weight: bold;
              margin-left: 5px;
            }
          }
        }

        .service-buy {
          margin-top: 25px;
          height: 46px;
          box-sizing: border-box;;
          width: 100%;
          margin-left: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 20px;

          .ui-btn-inverse {
            color: #ffffff;
            background-color: #ff8a00;
            border-color: #ea7f00;
            display: block;
            width: 170px;
            height: 46px;
            font-size: 18px;
            box-sizing: border-box;
            padding: 12px 0;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
          }

          .service-contact-btn {
            color: #FF6900;
            line-height: 46px;
            width: 170px;
            height: 46px;
            display: inline-block;
            border: 1px solid #FF6900;
            box-sizing: border-box;

            &:hover {
              color: #fff;
              line-height: 46px;
              width: 170px;
              height: 46px;
              display: inline-block;
              box-sizing: border-box;
              background: #ff8a00;
              text-decoration: none;
              i {
                background-image: url(~/assets/item/2.png);
              }
            }

            i {
              background-image: url(~/assets/item/1.png);
              width: 24px;
              height: 24px;
              background-size: contain;
              display: inline-block;
              position: relative;
              left: 32px;
              top: 5px;
            }

            u {
              text-decoration: none;
              background: none;
              font-size: 18px;
              line-height: 46px;
              margin-left: 33px;
            }
          }
        }
      }

    }
  }
}
.content{
  width: 1100px;
  margin: 20px auto;
  background-color: #FFFFFF;
}
.clearfix:before, .clearfix:after {
  content: ' ';
  display: table;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
</style>
